<!doctype html>
<html>
<head>
 <title>HTML5-now: progress element</title>
 <script src="../base2-legacy.js"></script><!-- support really old browsers -->
 <script src="../html5-now.js"></script>
 <script src="colorizer.js"></script>
 <link rel="stylesheet" type="text/css" href="examples.css">
</script>
</head>
<body>
 <h1>HTML5-now: <code>progress</code> element</h1>

 <p>A simple <code>progress</code> element with <code>max</code> and <code>value</code> attributes:</p>

 <div class="example">
  <progress value="55" max="60"></progress> 5 seconds remaining
 </div>

 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;progress value="55" max="60"&gt;&lt;/progress&gt; 5 seconds remaining
</pre>

 <p>A <code>progress</code> element that parses its relative value from its text content:</p>

 <div class="example">
  <progress>66%</progress>
 </div>

 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;progress&gt;66%&lt;/progress&gt;
</pre>

 <p>A more complex example of a <code>progress</code> element that parses its text content:</p>

 <div class="example">
  <progress>15 of 55 items downloaded</progress>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;progress&gt;15 of 55 items downloaded&lt;/progress&gt;
</pre>

 <p>If the <code>progress</code> element is taller than it is wide then it is rendered vertically:</p>

 <div class="example">
  <progress style="width:2em;height:8em">75%</progress>
  <progress style="width:2em;height:8em">25%</progress>
  <progress style="width:2em;height:8em">45%</progress>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;progress style="width:2em;height:8em"&gt;75%&lt;/progress&gt;
&lt;progress style="width:2em;height:8em"&gt;25%&lt;/progress&gt;
&lt;progress style="width:2em;height:8em"&gt;45%&lt;/progress&gt;
</pre>

</body>
</html>
